<template>
  <el-main :style="{background: '#ebebeb'}">
    <el-row class="body-card">
      <h3 style="cursor: pointer" @click="routerBack"><i class="el-icon-arrow-left"></i>{{title}}</h3>
      <Divider/>
      <el-row>
        <el-form :model="formData"  ref="Form" labelWidth="100px">
          <el-form-item label="标题：" prop="username">
            <el-input 
              placeholder="请输入标题" type="text" v-model="formData.title" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="作者：" prop="password">
            <el-input 
              placeholder="请输入作者名" type="text" v-model="formData.author" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="日期：" prop="date">
            <el-date-picker
              v-model="formData.date"
              type="datetime"
              placeholder="选择日期时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="是否公开：" prop="password">
            <el-radio-group v-model="formData.isAllow">
              <el-radio :label="true">允许公开</el-radio>
              <el-radio :label="false">禁止公开</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="内容：" prop="password">
            <el-input
              type="textarea"
              :rows="10"
              placeholder="请输入内容"
              v-model="formData.content">
            </el-input>
          </el-form-item>
          <el-form-item :style="{paddingTop:'20px'}">
            <el-button :style="{width:'150px'}" type="primary" @click="editnote" size="medium">提交</el-button>
            <el-button :style="{width:'150px'}" type="primary" @click="routerBack" size="medium">取消</el-button>
          </el-form-item>
        </el-form>
      </el-row>
    </el-row>
  </el-main>
</template>

<script>

import {
   noteServer
} from "../../../api/backstage";
  export default {
    name: "travelNotesArticle",
    data() {
      return {
        title: "",
        searchId: null,
        formData: {
          id: null,
          title: "",
          author: '',
          date: '',
          content: '',
		  classify:'',
          isAllow: false,
        },
		state:'1',
      };
    },
    mounted() {
      const {path} = this.$route.matched[1];
      const {params} = this.$route;
      switch (path) {
        case '/backstage-manager/travel-notes-new':
          this.title = '新建游记';
          break;
        case '/backstage-manager/travel-notes-edit/:noteid/:notetitle/:authornme/:date/:reportstate/:note':
          this.title = '修改游记';
          this.searchId = params.noteid;
          this.formData.title=params.notetitle;
          this.formData.author=params.authornme;
          this.formData.date=params.date; 
          if(params.reportstate==2){
            this.formData.isAllow=true;
          }else{
            this.formData.isAllow=false;
          }
          this.formData.content=params.note;
          break;
      } 
    },
    methods: { 
      editnote(){
	  if( this.formData.isAllow==true)
		  {
		  this.state='2';}
		  else{
		  this.state='1';} 
        if(this.searchId!=null){
          noteServer("put", {
            noteid:this.searchId,
            notetitle:this.formData.title,
            authorname:this.formData.author,
            state:this.state, 
            notetext:this.formData.content,
          }).then(
        suc => {
          const { code, message } = suc.data;
          if (code) {
         this.$message({
              type: "success",
              message
            }); 
          } else {
            this.$message({
              type: "error",
              message
            }); 
		  } 
		  },
        err => {
          this.$message({
            type: "error",
            message: err.message
          });
        })
        }
        else{ 
          noteServer("post", {
            title:this.formData.title,
            author_name:this.formData.author,
            class_tag:this.formData.classify,
			state:state,
            content:this.formData.content,
          }).then(
            suc => {
              console.log(suc);
            },
            err => {
              console.log(err);
            }
          );
        }

      },
      submitForm(formData){
        const {title, author, classify, isAllow,content} = this.formData;
        reportnotesServer("post", {title, author, classify, isAllow,content}).then(
          suc => {
            console.log(suc);
          },
          err => {
            console.log(err);
          }
        );
  },
      routerBack() {
        this.$router.push({
          path: `/backstage-manager/travel-notes-manager`
        });
      }
    }
  };
</script>

<style lang="less">

</style>
